$text-width: 203px;
$text-padding: 11px 0;
$text-border: 1px solid rgba(56, 56, 58, 0.3);

.dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

page {
  background-color: $colorBeige !important;
}

.gift-certificate-receive {
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  &-text {
    color: #38383A;
    font-family: $notoSans;
    font-size: 18px;
    line-height: 1.5;
    position: relative;
    margin-top: 7.8vh;
    width: $text-width;
    margin-left: calc(-#{$text-width} / 2);
    left: 45%;
    opacity: 0;
  }

  &-title {
    padding: $text-padding;
  }

  &-paragraph {
    padding: $text-padding;
  }

  &-sign {
    border-top: $text-border;
    padding: $text-padding;
  }

  &-button {
    width: $text-width;
    margin-left: calc(-#{$text-width} / 2);
    left: 50%;
    position: absolute;
    bottom: 4.64vh;
    opacity: 0;
  }

  &-loading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background: #fcfbf7;
  }

  video {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 300%;
    height: 100%;
    object-fit: contain;
  }
}

.gift-certificate-details-wrapper {
  padding-bottom: calc($bottomDockHeight + $margin);
  padding-top: 40px;
}

.gift-card-spacing {
  margin-bottom: 37px;
}

.event-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.chevron {
  @include size(6px, 12px);
  flex-shrink: 0;
}
